import { graphql } from 'gatsby'
import React from 'react'

export default function Article({data}) {
  const article = data.articlesList
  console.log('article', article)
  return (
    <div className="article-page">
      <div className="banner">
        <div className="container">
          <h1>{article.title}</h1>
          <div className="article-meta">
            <a><img src={article.author.image} /></a>
            <div className="info">
              <a className="author">{article.author.username}</a>
              <span className="date">{article.createAt}</span>
            </div>
            <button className="btn btn-sm btn-outline-secondary">
              <i className="ion-plus-round" />
          &nbsp;
          Follow {article.author.username} <span className="counter">({article.author.following})</span>
            </button>
        &nbsp;&nbsp;
        <button className="btn btn-sm btn-outline-primary">
              <i className="ion-heart" />
          &nbsp;
          Favorite Post <span className="counter">({article.favoritesCount})</span>
            </button>
          </div>
        </div>
      </div>
      <div className="container page">
        <div className="row article-content">
          <div className="col-md-12">
            <div dangerouslySetInnerHTML={{__html: article.body}}></div>
          </div>
        </div>
        <hr />
        <div className="article-actions">
          <div className="article-meta">
            <a href="profile.html"><img src="http://i.imgur.com/Qr71crq.jpg" /></a>
            <div className="info">
              <a className="author">Eric Simons</a>
              <span className="date">January 20th</span>
            </div>
            <button className="btn btn-sm btn-outline-secondary">
              <i className="ion-plus-round" />
          &nbsp;
          Follow Eric Simons <span className="counter">(10)</span>
            </button>
        &nbsp;
        <button className="btn btn-sm btn-outline-primary">
              <i className="ion-heart" />
          &nbsp;
          Favorite Post <span className="counter">(29)</span>
            </button>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-12 col-md-8 offset-md-2">
            <form className="card comment-form">
              <div className="card-block">
                <textarea className="form-control" placeholder="Write a comment..." rows={3} defaultValue={""} />
              </div>
              <div className="card-footer">
                <img src="http://i.imgur.com/Qr71crq.jpg" className="comment-author-img" />
                <button className="btn btn-sm btn-primary">
                  Post Comment
            </button>
              </div>
            </form>
            <div className="card">
              <div className="card-block">
                <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
              </div>
              <div className="card-footer">
                <a className="comment-author">
                  <img src="http://i.imgur.com/Qr71crq.jpg" className="comment-author-img" />
                </a>
            &nbsp;
            <a className="comment-author">Jacob Schmidt</a>
                <span className="date-posted">Dec 29th</span>
              </div>
            </div>
            <div className="card">
              <div className="card-block">
                <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
              </div>
              <div className="card-footer">
                <a className="comment-author">
                  <img src="http://i.imgur.com/Qr71crq.jpg" className="comment-author-img" />
                </a>
            &nbsp;
            <a className="comment-author">Jacob Schmidt</a>
                <span className="date-posted">Dec 29th</span>
                <span className="mod-options">
                  <i className="ion-edit" />
                  <i className="ion-trash-a" />
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  )
}

export const query = graphql`
query ($slug: String) {
  articlesList(slug: {eq: $slug}) {
    author {
      image
      username
      following
    }
    createdAt
    favoritesCount
    title
    slug
    body
    description
  }
}
`